@import './custom-variables.scss';
// 全局变量
// $--side-width: 415px; // 左边、右边侧边栏宽度
// $--head-height: 80px; // 顶部标题高度
// $--main-height: 850px; // 内容区高度
// $--body-minwidth: 1200; // body宽度

// $--padding-home-layout: 0 34px 20px 34px; // 首页布局padding

// $--border-radius-normal: 4px; // 圆角

// $--gutter: 20px; // 通用间隙

$--font-size-12: 12px;
$--font-size-14: 14px;
$--font-size-16: 16px;
$--font-size-18: 18px;
$--font-size-20: 20px;
// $--font-size-middle: 14px;
// $--font-size-normal: 16px;
// $--font-size-title: 18px; // 头部标题
// $--font-size-big: 24px;
// $--font-size-head: 30px; // 头部标题

// $--font-weigth-title: 500; // 标题

$--color-white: #fff; // 白色
$--color-danger: #f56c6c; // 危险 / 红色
$--color-violet: #a89cff; // 紫色
$--color-orange: #fc8c6b; // 橙色
$--color-blue: #00cbf0; // 蓝色
$--color-yellow: #ffc002; // 黄色
$--color-cyan: #02ddb1; // 青色
$--color-success: #67c23a; // 青色
$--color-info: #909399; // 青色

// $--color-primary: #f00; // 主题色
$--color-disabled: #ebebeb; // 主题色

$--color-text-dark: #000;
$--color-text-title: #333;
$--color-text-normal: #1f1f1f;
$--color-text-sub: #666; // 弱级文本
// $--color-text-normal-hover: #333;

$--color-border-normal: #e8eded; // 边框颜色
// $--color-bg-head: #37b1dd; // 头部背景色
// $--color-bg-hover: #f1f5f9; // hover 背景色
// $--color-bg-linear-gradient: linear-gradient($--color-bg-head, $--color-white);
// $--color-bg-linear-gradient: linear-gradient(#4bc4e4, $--color-white);

// $layoutPagePadding: 20px;

$--color-menu: #f7fafa; // 菜单色
$--color-fill: #f2f5f5; // 标签填充色

// sidebar
$menuText: $--color-text-title;
$menuActiveText: $--color-primary;
$menuActiveBg: #f2ffff;
$subMenuActiveText: $--color-text-dark; // https://github.com/ElemeFE/element/issues/12951

// $menuBg: #304156;
$menuBg: #fff;
$menuHover: $--color-menu;

$subMenuBg: #fff;
$subMenuHover: $--color-menu;

$sideBarWidth: 210px; // 菜单宽度

$--form-input-width: 193px; // 默认输入框的宽度

// navbar
$--nabbar-height: 48px; // 顶部导航高度 && logo高度

$--layout-page-padding: 20px; // PC端布局padding
$--layout-page-mobile-padding: 12px; // 移动端布局padding

$--height-hamburger: 28px; // 暂开 闭合 导航菜单的按钮

$--height-home-card: 240px; // 首页卡片的高度

$--color-button-focus: $--color-primary; // 按钮组选中的颜色
$--color-border-button-focus: #c6ebfd; // 按钮组选中的border颜色
$--color-bg-button-focus: #ecf8fe; // 按钮组选中的background颜色

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
    menuBg: $menuBg;
    menuText: $menuText;
    menuActiveText: $menuActiveText;
    sideBarWidth: $sideBarWidth;
    colorPrimary: $--color-primary;
    colorDisabled: $--color-disabled;
    colorFill: $--color-fill;
    formInputWidth: $--form-input-width;

    colorSuccess: $--color-success;
    colorInfo: $--color-info;
    // colorOrange: $--color-orange;
    colorDanger: $--color-danger;
    heightHomeCard: $--height-home-card;
    // colorBlue: $--color-blue;
    // colorYellow: $--color-yellow;
    // colorCyan: $--color-cyan;
}
